| electron + vue 使用WebView调用打印机 | 您所在的位置：网站首页 › vue 打印机 › electron + vue 使用WebView调用打印机 |
electron + vue 使用WebView调用打印机
|
打印机型号是：Zebra GT820，需要先从网上下载驱动程序，然后在自己电脑上面安装。
客户端打印机接入流程主进程文件：/src/main/index.js引入electron import { app, BrowserWindow, ipcMain} from 'electron'主进程获取打印机列表 我在主进程写了个方法createWindow创建BrowserWindow，可将这段代码放在createWindow里面 // 斑马打印机，在主线程下，通过ipcMain对象监听渲染线程传过来的getPrinterList事件 ipcMain.on('getPrinterList', (event) => { // 主线程获取打印机列表 const list = mainWindow.webContents.getPrinters() // 通过webContents发送事件到渲染线程，同时将打印机列表也传过去 mainWindow.webContents.send('getPrinterList', list) })渲染进程获取打印机列表，可在具体的vue文件里面，create生命周期里，或者触发某个事件时 // 获取本地打印机列表，可在vue的created方法里获取，也可以某个事件触发获取 getLocalPrinterList () { this.printerSelection = [] console.log('getLocalPrinterList') // 打印机 // 渲染线程主动发送getPrinterList事件到主线程请求打印机列表 ipc.send('getPrinterList') // 监听主线程获取到打印机列表后的回调 ipc.once('getPrinterList', (event, data) => { // data就是打印机列表] for (var i = 0; i < data.length; i++) { var printer = { id: data[i].name, value: data[i].name } this.printerSelection.push(printer) } }) },创建打印页面：print-boxcode.html需要注意的是，这个文件要放在electron的静态目录里面，即static目录。如果不放在static目录，.html文件是不会打包到dist下的。 Document body { margin: 0px; padding: 0px; width: 320px; } .title { width: 100%; margin-top: 10px; margin-bottom: 10px; text-align: right; font-size: 22px; font-weight: bold; } .content { width: 100%; border: 1px solid #000; margin: 0px; padding: 10px; } table tr td{ line-height: 36px; } Box batchNo: {{batchNo}} P/N: {{pn}} specifications: {{specifications}} quantity: {{quantity}} date of manufacture: {{date}} employee number: {{employee}}在具体的vue文件里面使用WebView引入print-boxcode.html文件，注意src路径 在具体的vue文件里面添加对WebView的监听事件created生命周期添加如下代码： // 打印机 window.setTimeout(() => { var webview = this.$refs.printWebview // 监听里面的消息，也就是监听print.html里面的ipcRenderer.sendToHost发送的事件，当该事件发送成功后就会进入下面的回调事件中执行打印操作。 webview.addEventListener('ipc-message', (event) => { if (event.channel === 'webview-print-do') {// 如果收到传过来的事件，名为"webview-print-do"，就执行 webview.print打印方法，打印里面的内容。 webview.print( { // 是否是静默打印 silent: true, printBackground: false, // 打印机的名称 deviceName: this.localPrinter } ) window.setTimeout(() => { this.boxCodeClickLoading = false this.reprintBoxCodeBtnLoading = false }, 2000) } }) }, 1000)在具体的vue文件里面的某个按钮的打印事件： // 打印箱码 printBoxCode (boxCode, goodsCode, batchNo, qty, manufactureDate, employeeNumber, specifications) { this.reprintBoxCodeBtnLoading = true // 发送数据 var data = { batchNo: batchNo, pn: goodsCode, specifications: specifications, quantity: qty, date: manufactureDate, employee: employeeNumber, barCode: boxCode } // 告诉渲染进程，开始渲染打印内容 var webview = this.$refs.printWebview webview.send('webview-print-render', data) }解释：打印事件触发后，发送webview-print-render命令给print-boxcode.html，print-boxcode.html收到后发送webview-print-do命令给vue文件中的监听者。vue文件监听到命令再发送打印命令给打印机。 上张图：
参考文献： https://gitcode.net/mirrors/ConardLi/electron-print-demo?utm_source=csdn_github_acceleratorhttps://blog.csdn.net/qq_34149805/article/details/82920566https://blog.csdn.net/qq_31001061/article/details/120087603https://www.jb51.net/article/151354.htm，有打印回调方法https://segmentfault.com/a/1190000015842187，參考第三種封裝工具類https://blog.csdn.net/xidianyueyong/article/details/98182687，解决发布后，webview无法加载.html文件的问题。因为目录不对，应该把.html文件放在static目录下。然后打包的时候，会从这个目录下找相关的.html文件。 |
通过打印机首选项，调整好打印机的打印尺寸，即Size中的Width和Height。
【本文地址】